<template>
	<view class="container">
		<!-- 设备列表展示 -->
		<view v-if="deviceList.length > 0" class="device-list">
			<view v-for="(device, index) in deviceList" :key="index" class="device-card">
				<view style="display: flex;justify-content: center;">
					<view style="width: 70%;">
						<view class="device-info">
							<text class="info-label">设备编号：</text>
							<text class="info-value">{{device.num}}</text>
						</view>
						<view class="device-info">
							<text class="info-label">硬件设备：</text>
							<text class="info-value">{{device.pile_hw_code}}({{device.wheel_hw_code || '锁下无车'}})</text>
						</view>
					</view>
					<view style="width:30%">
						<button class="lock-btn" @click="openLock(device.num)">开锁</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态提示 -->
		<view v-else class="empty-view">
			<text>暂无设备数据</text>
		</view>

		<!-- 操作提示 -->
		<view class="tip-box" v-if="deviceList.length > 0">
			<text class="tip-text">桩索引: {{pile_idx}} | 站点ID: {{station_id}}</text>
		</view>
	</view>
</template>

<script>
	import {
		getCurrent
	} from '@/api/layout.js'

	export default {
		data() {
			return {
				station_id: 0, // 站点ID
				pile_idx: 0, // 桩索引
				deviceList: [], // 设备列表
				autoRefreshTimer: null, // 自动刷新定时器
				isPageActive: true // 页面是否处于活动状态
			}
		},
		methods: {
			// 获取设备列表
			async getList(station_id, pile_idx) {
				try {
					const res = await getCurrent(station_id, pile_idx)
					if (res && res.code === 200 && res.data && Array.isArray(res.data)) {
						this.deviceList = res.data
						// console.log('获取设备列表成功:', res.data)
					} else {
						// 仅在第一次加载或页面激活时显示错误提示
						if (this.isPageActive) {
							uni.showToast({
								title: '数据加载失败',
								icon: 'none'
							})
						}
						console.warn('接口返回数据异常:', res)
					}
				} catch (e) {
					// 仅在第一次加载或页面激活时显示错误提示
					if (this.isPageActive) {
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						})
					}
					console.error('请求失败:', e)
				}
			},

			// 开锁操作
			async openLock(num) {
				if (!num) {
					uni.showToast({
						title: '缺少设备编号',
						icon: 'none'
					})
					return
				}
				// 添加确认弹窗
				const confirmResult = await uni.showModal({
					title: '开锁确认',
					content: `是否确认要开启编号 ${num} 的车锁？`,
					confirmText: '确认开锁',
					cancelText: '再想想',
					confirmColor: '#007AFF'
				});
				// 如果用户取消开锁
				if (!confirmResult[1].confirm) {
					uni.showToast({
						title: '已取消开锁',
						icon: 'none'
					});
					return;
				}

				try {
					// 调用开锁接口
					const res = await uni.request({
						url: "https://babycar.wykji.cn/babyCar.pile/unlock",
						method: "POST",
						data: JSON.stringify({
							station_id: this.station_id,
							pile_idx: this.pile_idx,
							num: Number(num)
						})
					})
					console.log('开'+num+'号锁响应:', res[1])
					// 优化状态判断
					if (res[1].data && res[1].data.status !== 'success') {
						uni.showToast({
							title: res[1].data.msg || '开锁异常',
							icon: 'error'
						})
					} else {
						uni.showToast({
							title: '开锁成功',
							icon: 'success'
						})
						// 开锁成功后立即刷新列表
						this.getList(this.station_id, this.pile_idx)
					}
				} catch (e) {
					console.error('开锁失败:', e)
					uni.showToast({
						title: '开锁请求失败',
						icon: 'none'
					})
				}
			},
			
			// 启动自动刷新定时器
			startAutoRefresh() {
				// 先清除可能存在的旧定时器
				if (this.autoRefreshTimer) {
					clearInterval(this.autoRefreshTimer)
				}
				
				// 每2秒刷新一次数据
				this.autoRefreshTimer = setInterval(() => {
					if (this.isPageActive) {
						this.getList(this.station_id, this.pile_idx)
					}
				}, 2000)
			}
		},
		onLoad(option) {
			if (option && option.station_id && option.pile_idx) {
				this.station_id = parseInt(option.station_id)
				this.pile_idx = parseInt(option.pile_idx)
				
				// 先加载一次数据
				this.getList(this.station_id, this.pile_idx)
				
				// 然后启动自动刷新
				this.startAutoRefresh()
			} else {
				uni.showToast({
					title: '参数不完整',
					icon: 'none'
				})
				// 返回上一页
				setTimeout(() => uni.navigateBack(), 1500)
			}
		},
		onShow() {
			// 页面激活时刷新数据
			this.isPageActive = true
			this.getList(this.station_id, this.pile_idx)
		},
		onHide() {
			// 页面隐藏时标记为非活动状态，停止刷新
			this.isPageActive = false
		},
		onUnload() {
			// 页面卸载时清除定时器
			if (this.autoRefreshTimer) {
				clearInterval(this.autoRefreshTimer)
				this.autoRefreshTimer = null
			}
		}
	}
</script>

<style>
	.container {
		padding: 30rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.device-list {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.device-card {
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.device-info {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.info-label {
		width: 160rpx;
		color: #666;
		font-size: 28rpx;
	}

	.info-value {
		flex: 1;
		color: #333;
		font-size: 30rpx;
		font-weight: 500;
	}

	.lock-btn {
		background-color: #f7a500;
		color: white;
		border-radius: 12rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		margin-top: 20rpx;
	}

	.empty-view {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
		color: #999;
		font-size: 32rpx;
		background: white;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.tip-box {
		background-color: #f0f7ff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-top: 40rpx;
		text-align: center;
	}

	.tip-text {
		color: #666;
		font-size: 26rpx;
	}
</style>